<template>
  <div class="epub-reader">
    <epub-cover v-if="route.linear === 'cover'" :ebook="ebook" :route="route" @change="handleChange"></epub-cover>
    <epub-toc v-else-if="route.linear === 'toc'" :ebook="ebook" :route="route" @change="handleChange"></epub-toc>
    <epub-item v-else :ebook="ebook" :route="route" @change="handleChange"></epub-item>
  </div>
</template>

<script>
import EpubCover from './EpubCover.vue';
import EpubToc from './EpubToc.vue';
import EpubItem from './EpubItem.vue';

export default {
  components: {
    EpubCover,
    EpubToc,
    EpubItem
  },
  props: {
    ebook: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      route: {
        linear: this.ebook.data.linear[0],
        context: {
          currentPage: 1,
          totalPage: 12
        }
      }
    }
  },
  methods: {
    handleChange(route) {
      this.route = route
      console.log('阅读进度已经变化', route)
    }
  }
}

</script>

<style scoped>
.epub-reader {
  width: 100%;
  height: 100%;
}
</style>
